
/*
 * @Author: 肖思汗 
 * @Date: 2025-06-17 11:40:07 
 * @Last Modified by: xiaosihanosihan
 * @Last Modified time: 2025-08-29 20:27:24
 */


import { Close } from "@nutui/icons-react-taro";
import clsx from "clsx";
import { observer } from "mobx-react-lite";
import { ReactNode } from "react";
import utils from "src/utils/utils";
import utilsStore from "src/utils/utilsStore";
import centerAlignStore from "../CenterAlign/centerAlignStore";
import HalignSVG from "../CenterAlign/img/H-align.svg";
import designerRender from "../Designer/designerRender";
import designerStore from "../Designer/designerStore";
import fineTuningStore from "../FineTuning/FineTuningStore";
import flipStore from "../Flip/FlipStore";
import leftTopStore from "../LeftTop/leftTopStore";
import copySVG from "./img/copy.svg";
import fineTuningSVG from "./img/fineTuning.svg";
import horizontalFlipSVG from "./img/horizontalFlip.svg";
import styles from "./objectsBtns.module.less";

interface Iprops {
    children?: ReactNode
}

// 元素的通用功能
const ObjectsBtns = observer((props: Iprops) => {

    return (
        <div
            className={clsx(
                styles.objectsBtns,
                Boolean(designerStore.activeObjectId) &&
                !leftTopStore.showColorPicker &&
                styles.show
            )}
            style={{
                paddingBottom: utilsStore.safeAreaBottom || utils.rpx2px(20)
            }}
        >

            {
                [
                    {
                        icon: HalignSVG,
                        text: "居中对齐",
                        onclick: () => {
                            centerAlignStore.setShow(true);
                            console.log("居中对齐");
                        }
                    },
                    {
                        icon: fineTuningSVG,
                        text: "微调",
                        onclick: () => {
                            console.log("微调");
                            fineTuningStore.setShow(true);
                        }
                    },
                    {
                        icon: horizontalFlipSVG,
                        text: "翻转",
                        onclick: () => {
                            console.log("翻转");
                            flipStore.setShow(true);
                        }
                    },
                    {
                        icon: copySVG,
                        text: "复制",
                        onclick: () => {
                            console.log("复制");
                            designerRender.copy();
                        }
                    }
                ].map((item) => {
                    return (
                        <div
                            className={styles.btns_Item}
                            onClick={item.onclick}
                        >
                            <img src={item.icon} alt="" className={styles.icon} />
                            <span className={styles.btns_Item_Text} >{item.text}</span>
                        </div>
                    )
                })
            }

            <Close
                className={styles.close}
                onClick={() => {
                    designerRender.discardActiveObject();
                    designerRender.requestRenderAll();
                }}
            />

        </div>
    );
});

export default ObjectsBtns;